<template>
	<view>

		<!-- 滑块
		:change="changeTab" 检测滑块改变
		:is-scroll="false" 可以会滚动
		:current="currentS" 当前滑块
		-->
		<view class="u-text-center">
			<u-tabs-swiper ref="uTabs"
			:list="list" 
			:is-scroll="false" 
			:current="currentS"
			@change="changeTab"
			bar-width="100"
			></u-tabs-swiper>
		</view>
		

		<!-- 内容 -->
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: 1300rpx;">
			<!-- 公司 -->
			<swiper-item style="height: 100%;">
					<scroll-view scroll-y style="height: 100%;width: 100%;  background-color: #eeeef6;" >
							<view class="page-box">
								<view class="order" v-for="c in collectionCompanyList" :key="c._id">
									<view class="item">
										<view class="content">
											<view class="title u-line-2">{{c.company_name}}</view>
											<!-- <view class="type">12asdfsafdsa3公司地址</view> -->
											<!-- <view class="type ">123asdfasfd1公司性质</view> -->
										</view>
										<view class="right">
											<view class="price u-m-r-10 u-font-10" style="color:#adb0b5">
												了解更多，点击查看
											</view>
											<u-button type="primary" size="mini" style="margin: 5px;" @click="enterCompany(c.company_id)">查看</u-button>
											<u-button type="warning" size="mini" style="margin: 5px;" @click="removeCompanyCollection(c._id)">移除</u-button>
										</view>
									</view>
									
					
								</view>
							</view>
						 
					</scroll-view>
			</swiper-item>
			<!-- 岗位 -->
			<swiper-item style="height: 100%;">
					<!-- 内容区域 -->
				     <view class="u-m-l-50 u-m-t-30"  >
						 敬请期待.......
						 
					 </view>
			</swiper-item>
			</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			list: [
			{
				name: '公司',
				
			}, 
			{
				name: '岗位',
				// count: 5
			}],
			//当前滑块
			currentS:0,	
			//内容下标
			swiperCurrent:0,
			//收藏公司集合
			collectionCompanyList:[]
			}
		},
		methods: {
			changeTab(index){
				this.currentS=index
				this.swiperCurrent=index
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				// console.log(e)
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e){
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.currentS = current;
			},
			//查找用户收藏的公司
			showCollection(){
				uniCloud.callFunction({
								name: "collection",
								data: {
									user_id:uni.getStorageSync('storage_user')!=''?uni.getStorageSync('storage_user').data[0]._id:'',
									type: "showCollection"
								},
								success: (res) => {
									// console.log("error！",res);
									if(res.result.status!=200){
										return;
									}
									//成功
									//赋值
									// console.log(res.result.data.data)
									this.collectionCompanyList=res.result.data.data
								},
								fail: (err) => {
									console.log(err)
								}
							})
			},
			//进入公司详情页面
			enterCompany(company_id){
				//将本地存储设置为
				// console.log(company_id)
				//将id设置进本地存储机制
				uni.setStorageSync("hotjob_nowCompanyId",company_id)
				uni.navigateTo({
				   url:'/pages/company/company'
				 })
				
			},
			//移除收藏公司
			removeCompanyCollection(collection_id){
			uniCloud.callFunction({
							name: "collection",
							data: {
								collection_id:collection_id,
								type: "removeCompanyCollection"
							},
							success: (res) => {
								// console.log("error！",res);
								if(res.result.status!=200){
									return;
								}
								//成功
								//赋值
								// console.log(res.result.data.data)
								// this.collectionCompanyList=res.result.data.data
								//刷新列表
								// console.log(this)
								this.showCollection();
							},
							fail: (err) => {
								console.log(err)
							}
						})	
			}
			
		},
		onShow(){
			this.showCollection();
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #f6f6f6;
}
.topbox{
	display: flex;
	background-color: #edf0f6;
	height: 200rpx;
}
.rightbox{
	flex:2;
	width:100%;
	/* background-color: #18B566; */
}
.leftbox{
	flex: 1;
	/* background-color: #82848A; */
	text-align: center;
	line-height: 200rpx;
}
.uni-scroll-view{
	height: 500rpx;
}
.footbox{
	position: fixed;
	bottom: 10rpx;
	height: 70rpx;
	right: 270rpx;
}
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
	
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			// background-color: yellow;
			width: 250px;
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
.order .item .right[data-v-74d0bef4] {
    width: 300px;
}
</style>
